<template>
  <div class="product-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <div class="search-header">
        <div class="header-title">
          <el-icon><Search /></el-icon>
          <span>筛选查询</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="addp">
            <el-icon><Plus /></el-icon>添加商品
          </el-button>
        </div>
      </div>

      <el-form :inline="true" :model="data" class="search-form">
        <el-form-item label="商品名称">
          <el-input
            v-model="data.name"
            placeholder="请输入商品名称"
            clearable
            @keyup.enter="sbutton"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sbutton">
            <el-icon><Search /></el-icon>查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="productData"
        border
        class="product-table"
        stripe
      >
        <el-table-column
          prop="name"
          label="商品名称"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column label="商品主图" width="100" align="center">
          <template #default="{ row }">
            <el-image
              :src="row.picture"
              :preview-src-list="[row.picture]"
              class="product-image"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100" align="center">
          <template #default="{ row }">
            <span class="price">¥{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="material" label="材质" width="120" />
        <el-table-column prop="className" label="类别" width="120" />
        <el-table-column prop="style" label="样式" width="120" />
        <el-table-column prop="specifications" label="规格" width="120" />
        <el-table-column prop="color" label="颜色" width="100" />
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              :before-change="() => pstatus(row)"
              class="status-switch"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="view(row)">
              <el-icon><View /></el-icon>查看
            </el-button>
            <el-button type="primary" link @click="pUpdate(row)">
              <el-icon><Edit /></el-icon>修改
            </el-button>
            <el-button type="danger" link @click="Pdelete(row.id)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="data.page"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :total="data.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 弹窗组件 -->
    <Update ref="updateRef" :visible="isShow" @close="heada" />
    <inquire ref="selectRef" :visible="seIsShow" @close="seHeada" />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Search, Plus, View, Edit, Delete } from "@element-plus/icons-vue";
import {
  getProductList,
  deleteProduct,
  ByidStatus
} from "@/api/product/product.js";
import { useRouter } from "vue-router";
import Update from "./updataProduct.vue";
import inquire from "./productDetail.vue";

// 定义响应式变量
const loading = ref(false);
const router = useRouter();
const productData = ref([]);
const parentMessage = ref();
const updateRef = ref(null);
const isShow = ref(false);
const selectRef = ref(null);
const seIsShow = ref(false);
const data = ref({
  name: "",
  page: 1,
  pageSize: 5,
  total: 1
});

//子组件通知父组件关闭方法
function heada() {
  isShow.value = false;
  getProducts();
}
//查询子组件通知父组件关闭
function seHeada() {
  seIsShow.value = false;
}

//修改商品
function pUpdate(v) {
  //传到修改弹窗
  updateRef.value.init(v);
  isShow.value = true;
}

//商品状态
function pstatus(row) {
  return value => {
    //获取的值为反的所以手动改变
    if (row.status == 1) {
      row.status = 0;
    } else {
      row.status = 1;
    }
    //传入后台改变产品状态
    let res = ByidStatus({ id: row.id, status: row.status });
    if ((res.code = 200)) {
      ElMessage({
        message: "修改成功!",
        type: "success"
      });
    }
    return true;
  };
}
// 查询
function sbutton() {
  getProducts();
}
//当前页改变时触发
function handleCurrentChange(number) {
  getProducts();
}
//pageSize改变时触发
function handleSizeChange() {
  //因为双向绑定了值所以直接查询就行
  getProducts();
}
//获取商品数据
async function getProducts() {
  loading.value = true;
  try {
    let res = await getProductList(data.value);
    if (res.code == 200) {
      productData.value = res.data.list;
      data.value.page = res.data.page;
      data.value.total = res.data.total;
    }
  } catch (error) {
    console.error("获取商品列表失败:", error);
    ElMessage.error("获取商品列表失败");
  } finally {
    loading.value = false;
  }
}
//跳转到产品添加的界面
function addp() {
  router.push({
    name: "addProduct"
  });
}
//删除操作
function Pdelete(p) {
  ElMessageBox.confirm("确定要删除吗?")
    .then(() => {
      //执行删除操作
      dp(p);
    })
    .catch(() => {});
}
//删除异步函数
async function dp(id) {
  let res = await deleteProduct(id);
  if (res.code == 200) {
    ElMessage({
      message: "删除成功!",
      type: "success"
    });
  }
  //删除完重新获取数据
  getProducts();
}
//查看按钮
function view(v) {
  selectRef.value.init(v);
  seIsShow.value = true;
}

//初始化加载
onBeforeMount(() => {
  getProducts();
});
</script>

<style scoped>
.product-container {
  padding: 15px;
  min-height: calc(100vh - 120px);
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.search-card,
.table-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

.search-card {
  margin-bottom: 15px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.header-title .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.search-form {
  padding: 20px;
}

.product-table {
  margin: 0 -20px;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.product-image:hover {
  transform: scale(1.05);
}

.price {
  color: #f56c6c;
  font-weight: 500;
}

.status-switch {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #fafafa;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}

:deep(.el-button.is-link) {
  padding: 4px 8px;
}

:deep(.el-button.is-link) .el-icon {
  margin-right: 4px;
}
</style>
